<template>
	<view class="content">
		<view class="image">
			   <image :src=src mode="widthFix"></image>
			  
		</view>
		 <view class="name">麦可可生日店铺</view>
		<view class="middle">
			 <view class="one">该程序将获取以下授权：</view>
			 <view class="two">获得您的公开信息（呢称、头像等）</view>
		</view>
		<view class="btn">
			         <view :class="[index>0?'three':'onthree']" @click="login">微信授权登录/注册</view>
					 <view class="four">暂不登录</view>
		</view>
		<view class="footer">
			<view @click="select" :class="[index>0?'select':'onselect']"></view >  <view >我已阅读并同意 <text class="ltwo"> 《用户服务协议》</text>和<text class="lone">《隐私协议》</text>
  <view class="next"> 使用<text>手机验证码登录</text></view></view>
		</view>
	</view>
</template>

<script>
	
	export default{
		 data(){
			  return{
				  index:1,
				  src:"../../static/204首页.png",
				  index:0
				 
			  }
		 },
		 onLoad(option) {
		 	this.index=option.id
		 },
		 methods:{
			select(){
			   if(this.index==1){
				   this.index=0
			   }else{
				   this.index=1
			   }
			} ,
			
			 	       getUserInfo() {
			 				return new Promise((resolve, reject) => {
			 					wx.getUserProfile({
			 						lang: 'zh_CN',
			 						desc: '用户登录', 
			 						success: (res) => {
			 							resolve(res.userInfo)
			 						},
			 						fail: (err) => {
			 							reject(err)
			 						}
			 					})
			 				})
			 			},
			  
			 			getLogin() {
			 				return new Promise((resolve, reject) => {
			 					wx.login({
			 						success(res) {
			 							resolve(res.code)
			 						},
			 						fail: (err) => {
			 							reject(err)
			 						}
			 					})
			 				})
			 			},
			  
			             login() {
							 
							 
			                 let userInfo = this.getUserInfo();
			 				let wxCode = this.getLogin();
			 				
			  
			 				Promise.all([userInfo, wxCode]).then((res) => {
			 					//都获取权限成功
							  this.src=res[0].avatarUrl
							  if(res[1] && this.index==0){
								     	this.$request("/userstate","post",{state:true})
									 
								  uni.redirectTo({
								  	url:`/pages/mine/index?src=${this.src}&hide=12`
								  })
							  }else{
								  this.$request("/userstate","post",{state:true})
								  									 
								  uni.redirectTo({
								  	url:"/pages/shopCars/tobuy"
								  })
							  }
							     
			 				}).catch(err => {
			 					
			 				})
			             }
			
			
				 
		 } 
	}
</script>



<style>
   .onthree{
	    background-color: #fe9a69;
		 color: white;
   }
	.image{
		width: 94px;
		height: 94px;
		background-color: #f2f2f2;
		margin: 0 auto;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
	}
	.image>image{
		width: 66px;
	}
	.name{
		 font-size: 37rpx;
		 font-weight: 400;
		margin: 0 auto;
		 margin-top: 20rpx;
		 position: relative;
		 left: 249rpx;
	}
	 .one{
		  margin-top: 60rpx;
		  margin-left: 70rpx;
		  font-size: 34rpx;
		  font-weight: 400;
	 }
	 .two{    
		     color:#939393;
			 font-size: 30rpx;
	 		  margin-top:20rpx;
	 		  margin-left: 70rpx;
	 }  
	   .btn{
		   display: flex;
		   flex-direction: column;
		   justify-content: center;
		   align-items: center;
		   margin-top: 20rpx;
		
	   }
	 .btn>view{
		  width: 670rpx;
		   height: 72rpx;
		   text-align: center;
		   line-height: 72rpx;
		   border-radius: 44rpx;
		   margin-top: 50rpx;
	 }
	 .three{
		    background-color: #e8e8e8;
			color: #bbbbbb;
	 }
	 .four{
		  border: 1px solid #fe9a69;
		  color: #fe9a69;
	 }
	 .footer{
		 display: flex;
		 flex-wrap: wrap;
	
		  margin-left: 40rpx;
		  color: black;
		  font-size: 30rpx;
		  margin-top: 40rpx;
	 }
	 .select{
		 width: 14px;
		 height: 14px;
		 border: 1px solid #7c7c7c;
		 border-radius: 50%;
		 margin-top: 6rpx;
		 margin-right: 8rpx;
		
	 }
		
	 .lone{
		 color: #fe9a69;
		 
	 }
	 .ltwo{
	 		 color: #fe9a69;
	 }
	 .next{
		 margin-top: 10rpx;
	 }
		 
	 .onselect{
		 width: 14px;
		 height: 14px;
		 border: 1px solid #7c7c7c;
		 border-radius: 50%;
		 margin-top: 6rpx;
		 margin-right: 8rpx;
		 background-color: #fe9a69;
	 }
</style>